<template>
  <div class="login-form">
    <div class="login-box">
      <div class="login-input" v-if="thirdLogin.loginType === 'local'">
        <span class="title">捷卓运营管理系统</span>
        <el-form :model="dataForm" :rules="dataRule" label-position="top" ref="loginForm" @keyup.enter.stop="() => { }">
          <el-col :span="24">
            <el-form-item prop="mobilePhone" label="" style="margin-top: 48px; margin-bottom: 25px">
              <el-input v-model="dataForm.mobilePhone" style="width: 100%; height: 50px" placeholder="请输入帐号"
                :prefix-icon="UserFilled">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="password" label="">
              <el-input v-model="dataForm.password" style="width: 100%; height: 50px" type="password"
                placeholder="请输入密码" show-password :prefix-icon="Lock">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div style="text-align: right; margin-bottom: 0px;">
              <el-link type="info" style="font-size: 14px" @click="showModifyPassword">
                修改密码
              </el-link>
            </div>
          </el-col>
          <el-button class="login-btn-submit" type="primary" size="large" @click="dataFormSubmit()"
            style="width: 100%; margin-top: 28px; height: 50px; font-size: 16px">
            登录
          </el-button>
          <!-- <el-space direction="horizontal" style="justify-content: center; width: 100%; margin-top: 12px">
            <el-text class="mx-1">没有账号，</el-text>
            <el-link type="primary" style="font-size: 14px">立即注册</el-link>
          </el-space> -->
        </el-form>
        <div class="third-login">
          <div class="title">其他登录方式</div>
          <div class="login-icon-container">
            <div class="login-icon-item">
              <a style="font-size: 22px; color: #888" title="企业微信" @click="onThirdLoginClick('wework')">
                <svg focusable="false" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                  <use xlink:href="#icon-qiyeweixin3">
                    <symbol id="icon-qiyeweixin3" viewBox="0 0 1024 1024">
                      <path
                        d="M210.823529 30.117647h602.352942a180.705882 180.705882 0 0 1 180.705882 180.705882v602.352942a180.705882 180.705882 0 0 1-180.705882 180.705882H210.823529a180.705882 180.705882 0 0 1-180.705882-180.705882v-602.352942a180.705882 180.705882 0 0 1 180.705882-180.705882z m452.246589 685.598118a10.541176 10.541176 0 0 0 1.325176 16.203294c23.250824 21.443765 38.249412 50.356706 42.465882 81.679059a44.935529 44.935529 0 0 0 55.115295 31.081411 44.212706 44.212706 0 0 0 31.442823-54.39247 44.694588 44.694588 0 0 0-38.550588-32.346353 138.24 138.24 0 0 1-76.619294-42.164706 10.842353 10.842353 0 0 0-15.179294 0zM425.622588 207.691294c-80.414118 8.734118-153.359059 42.706824-205.763764 95.774118-20.419765 20.359529-37.345882 43.911529-50.296471 69.692235a240.158118 240.158118 0 0 0 17.347765 245.278118c14.275765 21.202824 37.586824 47.706353 59.030588 66.56l-9.758118 75.053176-1.024 3.132235c-0.301176 0.963765-0.301176 2.048-0.421647 2.95153l-0.240941 2.409412 0.240941 2.409411a24.576 24.576 0 0 0 36.803765 18.672942h0.421647l1.445647-1.084236 23.130353-11.444706 68.909176-34.153411c32.768 9.276235 66.680471 13.854118 100.773647 13.613176 42.164706 0.120471 83.907765-7.047529 123.602824-21.202823a44.152471 44.152471 0 0 1-30.479059-46.260706c-41.020235 13.010824-84.329412 17.227294-127.09647 12.468706l-6.866824-0.90353a312.139294 312.139294 0 0 1-45.658353-9.396706 31.503059 31.503059 0 0 0-24.455529 2.469647l-1.867294 0.963765-56.741647 32.888471-2.409412 1.445647c-1.385412 0.783059-2.048 1.024-2.710588 1.024a3.855059 3.855059 0 0 1-3.614118-3.97553l2.16847-8.613647 2.529883-9.396706 4.035765-15.540706 4.698352-17.227294a23.311059 23.311059 0 0 0-8.613647-26.081882c-22.287059-16.263529-41.562353-36.141176-57.223529-58.849882a189.199059 189.199059 0 0 1-13.974588-193.355294c10.480941-20.540235 24.094118-39.333647 40.357647-55.657412 42.947765-43.791059 103.424-71.619765 170.285176-78.787765a322.379294 322.379294 0 0 1 69.632 0c66.499765 7.529412 126.614588 35.117176 169.321412 78.426353a243.350588 243.350588 0 0 1 72.282353 174.592 44.212706 44.212706 0 0 1-88.425412 0 154.925176 154.925176 0 0 0-46.020706-111.193412c-30.117647-30.117647-72.282353-50.537412-118.844235-57.464471a234.134588 234.134588 0 0 0-50.537412 0z m-194.3-86.5c23.8 0 43.2 19.3 43.2 43.1s-19.3 43.1-43.2 43.1c-23.8 0-43.2-19.3-43.2-43.1s19.3-43.1 43.2-43.1zm-215.9 86.2c-23.8 0-43.2-19.3-43.2-43.1s19.3-43.1 43.2-43.1 43.2 19.3 43.2 43.1-19.4 43.1-43.2 43.1zm586.8 415.6c56.9-41.2 93.2-102 93.2-169.7 0-124-120.8-224.5-269.9-224.5-149 0-269.9 100.5-269.9 224.5S540.9 847.5 690 847.5c30.8 0 60.6-4.4 88.1-12.3 2.6-.8 5.2-1.2 7.9-1.2 5.2 0 9.9 1.6 14.3 4.1l59.1 34c1.7 1 3.3 1.7 5.2 1.7a9 9 0 006.4-2.6 9 9 0 002.6-6.4c0-2.2-.9-4.4-1.4-6.6-.3-1.2-7.6-28.3-12.2-45.3-.5-1.9-.9-3.8-.9-5.7.1-5.9 3.1-11.2 7.6-14.5zM600.2 587.2c-19.9 0-36-16.1-36-35.9 0-19.8 16.1-35.9 36-35.9s36 16.1 36 35.9zm179.9 0c-19.9 0-36-16.1-36-35.9 0-19.8 16.1-35.9 36-35.9s36 16.1 36 35.9a36.08 36.08 0 01-36 35.9z">
                      </path>
                    </symbol>
                  </use>
                </svg>
              </a>
            </div>
            <div class="login-icon-item">
              <a style="font-size: 22px; color: #888" title="钉钉" @click="onThirdLoginClick('dingtalk')">
                <svg focusable="false" width="1em" height="1em" fill="currentColor" aria-hidden="true"
                  viewBox="64 64 896 896">
                  <path
                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm227 385.3c-1 4.2-3.5 10.4-7 17.8h.1l-.4.7c-20.3 43.1-73.1 127.7-73.1 127.7s-.1-.2-.3-.5l-15.5 26.8h74.5L575.1 810l32.3-128h-58.6l20.4-84.7c-16.5 3.9-35.9 9.4-59 16.8 0 0-31.2 18.2-89.9-35 0 0-39.6-34.7-16.6-43.4 9.8-3.7 47.4-8.4 77-12.3 40-5.4 64.6-8.2 64.6-8.2S422 517 392.7 512.5c-29.3-4.6-66.4-53.1-74.3-95.8 0 0-12.2-23.4 26.3-12.3 38.5 11.1 197.9 43.2 197.9 43.2s-207.4-63.3-221.2-78.7c-13.8-15.4-40.6-84.2-37.1-126.5 0 0 1.5-10.5 12.4-7.7 0 0 153.3 69.7 258.1 107.9 104.8 37.9 195.9 57.3 184.2 106.7z">
                  </path>
                </svg>
              </a>
            </div>
            <div class="login-icon-item">
              <a style="font-size: 22px; color: #aca9a9" title="飞书" @click="onThirdLoginClick('feishu')">
                <svg width="1em" height="1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <rect width="24" height="24" rx="6" fill="currentColor" />
                  <path
                    d="M19.001 5.15894L15.069 9.40828C15.0554 9.42285 15.0454 9.44046 15.0399 9.45967C15.0345 9.47887 15.0337 9.49911 15.0376 9.51869C15.0713 9.68192 15.0511 9.85169 14.98 10.0024C14.9089 10.1532 14.7908 10.2768 14.6434 10.3546C14.5031 10.4324 14.3348 10.4602 14.1711 10.4916C14.0073 10.464 13.8571 10.3834 13.7436 10.2622L10.6634 13.3424C10.6573 13.3487 10.6525 13.3563 10.6495 13.3645C10.6465 13.3728 10.6452 13.3816 10.6458 13.3904L10.9499 17.4563L18.7941 5.62298L18.9621 5.26776L18.9579 5.26616L18.9584 5.26562Z"
                    fill="#007FFF" />
                  <path
                    d="M18.8421 5L14.5922 8.93092C14.5777 8.94476 14.56 8.95489 14.5407 8.96046C14.5213 8.96603 14.501 8.96687 14.4813 8.96293C14.3181 8.92935 14.1484 8.95074 13.9375 9.0206C13.7868 9.09046 13.6632 9.20792 13.5857 9.3549C13.5082 9.50188 13.4812 9.67024 13.5088 9.83408C13.5364 9.99792 13.617 10.1482 13.7383 10.2617L10.6576 13.3413C10.6512 13.3476 10.6436 13.3524 10.6353 13.3554C10.6269 13.3584 10.618 13.3596 10.6091 13.3589L6.54321 13.0549L18.3771 5.21121L18.7323 5.04266L18.7349 5.04693Z"
                    fill="#0069FF" />
                  <path
                    d="M18.7349 5.04693L14.5293 8.93678C14.5149 8.95028 14.4974 8.96017 14.4784 8.96564C14.4594 8.97111 14.4394 8.97201 14.42 8.96825C14.2578 8.93235 14.0883 8.95074 13.9375 9.0206C13.7868 9.09046 13.6632 9.20792 13.5857 9.3549C13.5082 9.50188 13.4812 9.67024 13.5088 9.83408C13.5364 9.99792 13.617 10.1482 13.7383 10.2617L10.6576 13.3413C10.6512 13.3476 10.6436 13.3524 10.6353 13.3554C10.6269 13.3584 10.618 13.3596 10.6091 13.3589L6.54321 13.0549L18.3771 5.21121L18.7323 5.04266L18.7349 5.04693Z"
                    fill="#00D3B4" />
                  <defs>
                    <linearGradient id="paint0_linear" x1="14.25" y1="24" x2="14.25" y2="3"
                      gradientUnits="userSpaceOnUse">
                      <stop stop-color="#FBFBFB" />
                      <stop offset="1" stop-color="white" />
                    </linearGradient>
                  </defs>
                </svg>
              </a>
            </div>
            <div class="login-icon-item">
              <a style="font-size: 22px; color: #aca9a9" title="微信" @click="onThirdLoginClick('wechat')">
                <svg focusable="false" width="1em" height="1em" fill="currentColor" aria-hidden="true"
                  viewBox="64 64 896 896">
                  <path
                    d="M690.1 377.4c5.9 0 11.8.2 17.6.5-24.4-128.7-158.3-227.1-319.9-227.1C209 150.8 64 271.4 64 420.2c0 81.1 43.6 154.2 111.9 203.6a21.5 21.5 0 019.1 17.6c0 2.4-.5 4.6-1.1 6.9-5.5 20.3-14.2 52.8-14.6 54.3-.7 2.6-1.7 5.2-1.7 7.9 0 5.9 4.8 10.8 10.8 10.8 2.3 0 4.2-.9 6.2-2l70.9-40.9c5.3-3.1 11-5 17.2-5 3.2 0 6.4.5 9.5 1.4 33.1 9.5 68.8 14.8 105.7 14.8 6 0 11.9-.1 17.8-.4-7.1-21-10.9-43.1-10.9-66 0-135.8 132.2-245.8 295.3-245.8zm-194.3-86.5c23.8 0 43.2 19.3 43.2 43.1s-19.3 43.1-43.2 43.1c-23.8 0-43.2-19.3-43.2-43.1s19.4-43.1 43.2-43.1zm-215.9 86.2c-23.8 0-43.2-19.3-43.2-43.1s19.3-43.1 43.2-43.1 43.2 19.3 43.2 43.1-19.4 43.1-43.2 43.1zm586.8 415.6c56.9-41.2 93.2-102 93.2-169.7 0-124-120.8-224.5-269.9-224.5-149 0-269.9 100.5-269.9 224.5S540.9 847.5 690 847.5c30.8 0 60.6-4.4 88.1-12.3 2.6-.8 5.2-1.2 7.9-1.2 5.2 0 9.9 1.6 14.3 4.1l59.1 34c1.7 1 3.3 1.7 5.2 1.7a9 9 0 006.4-2.6 9 9 0 002.6-6.4c0-2.2-.9-4.4-1.4-6.6-.3-1.2-7.6-28.3-12.2-45.3-.5-1.9-.9-3.8-.9-5.7.1-5.9 3.1-11.2 7.6-14.5zM600.2 587.2c-19.9 0-36-16.1-36-35.9 0-19.8 16.1-35.9 36-35.9s36 16.1 36 35.9zm179.9 0c-19.9 0-36-16.1-36-35.9 0-19.8 16.2-35.9 36-35.9s36 16.1 36 35.9a36.08 36.08 0 01-36 35.9z">
                  </path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="login-input" v-else>
        <div class="login-back-local">
          <el-icon title="返回账号密码登录" style="font-size: 18px" @click="onThirdLoginClick('local')">
            <Back />
          </el-icon>
          <span class="title">{{ thirdLoginTitle }}登录</span>
          <component :is="thirdLoginComponent" @success="handleOAuthSuccess" @error="handleOAuthError"></component>
        </div>
      </div>

    </div>
    <div style="
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 44px;
        font-size: 14px;
        color: #666;
        background-color: #f7fafe;
      ">
      <p style="text-align: center; line-height: 44px">
        Copyright © 2025 宸衢科技 津 ICP 备 20006136 号-1 津公网安
      </p>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Login',
};
</script>

<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import { Router, useRouter } from 'vue-router';
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue';
import { Search, UserFilled, Lock } from '@element-plus/icons-vue'
import bkImg from '@/assets/img/login_icon2.png';
import { encrypt, setToken, treeDataTranslate } from '@/common/utils/index';
import { loginParam } from '@/types/upms/login';
import { useLoginStore, useLayoutStore } from '@/store';
import LoginController from '@/api/system/LoginController';
import OAuthController from '@/api/system/OAuthController';
import FormulaEditor from '@/components/FormulaEditor/index.vue';
import DinkTalkLogin from '@/components/DingTalk/login.vue';
import FeishuLogin from '@/components/Feishu/login.vue';
import WeWorkLogin from '@/components/WeWork/login.vue';
import WeChatLogin from '@/components/WeChat/login.vue';
import { useCommon } from '@/common/hooks/useCommon';
import FormModifyPassword from './password.vue';

const { Dialog } = useCommon();
const loginForm = ref<FormInstance>();

const loginStore = useLoginStore();
const layoutStore = useLayoutStore();
const router: Router = useRouter();

const dataForm = reactive({
  mobilePhone: 'admin',
  password: '123456',
});

const dataRule = {
  mobilePhone: [{ required: true, message: '帐号不能为空', trigger: 'blur' }],
  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
};

const thirdLogin = ref({
  loginType: 'local',
  thirdLoginToken: null,
});

onMounted(() => {
  window.addEventListener('keydown', handleKeyDown);
})
onUnmounted(() => {
  window.removeEventListener('keydown', handleKeyDown, false)
})
// 键盘事件处理
function handleKeyDown(event) {
  if (event.keyCode === 13) { // 回车键的键码是13
    dataFormSubmit();
  }
}
const thirdLoginComponent = computed(() => {
  switch (thirdLogin.value.loginType) {
    case 'dingtalk':
      return DinkTalkLogin;
    case 'feishu':
      return FeishuLogin;
    case 'wework':
      return WeWorkLogin;
    case 'wechat':
      return WeChatLogin;
    default:
      return 'div';
  }
});

const thirdLoginTitle = computed(() => {
  switch (thirdLogin.value.loginType) {
    case 'dingtalk':
      return '钉钉';
    case 'feishu':
      return '飞书';
    case 'wework':
      return '企业微信';
    case 'wechat':
      return '微信';
    default:
      return '';
  }
});

const onThirdLoginClick = (type: string) => {
  thirdLogin.value.loginType = type;
};

const handleOAuthSuccess = data => {
  console.log('第三方登录成功', data);
  layoutStore.setMenuList(treeDataTranslate(data.data.menuList, 'menuId', 'parentId'));
  delete data.data.menuList;

  loginStore.setUserInfo(data.data);
  setToken(data.data.tokenData);
  layoutStore.setCurrentMenu(null);
  router.replace({ name: 'main' });
};

const handleOAuthError = err => {
  console.error('第三方登录失败', err);
  if (err && err.errorCode === 'DATA_NOT_EXIST') {
    thirdLogin.value.thirdLoginToken = err.data.token;
    onThirdLoginClick('local');
  }
};

const dataFormSubmit = () => {
  loginForm.value?.validate((valid: boolean) => {
    if (valid) {
      login();
    }
  });
};

const login = function (verifyParams: { captchaVerification: string } | null = null) {
  let params: loginParam = {
    loginName: dataForm.mobilePhone,
    password: encrypt(dataForm.password),
    captchaVerification: verifyParams?.captchaVerification,
  };
  setToken(null);
  LoginController.login(params)
    .then(data => {
      if (data.data.menuList) {
        layoutStore.setMenuList(treeDataTranslate(data.data.menuList, 'menuId', 'parentId'));
        delete data.data.menuList;
      }
      setToken(data.data.tokenData);
      layoutStore.setCurrentMenu(null);
      layoutStore.clearAllTags();
      if (data.data.tokenData) {
        delete data.data.tokenData;
      }
      loginStore.setUserInfo(data.data);
      let currentWorkbenchId = data.data.currentWorkbenchId;
      if (
        data.data.currentWorkbenchId == null &&
        Array.isArray(data.data.workbenchIds) &&
        data.data.workbenchIds.length > 0
      ) {
        currentWorkbenchId = data.data.workbenchIds[0];
        data.data.currentWorkbenchId = currentWorkbenchId;
      }
      if (currentWorkbenchId == null) {
        layoutStore.setCurrentMenuId('');
        router.replace({ name: 'main' });
      } else {
        layoutStore.setCurrentMenuId('WORKBENCH_MENU_ID');
        router.replace({
          name: 'reportRender',
          query: {
            pageId: data.data.currentWorkbenchId,
          },
        });
      }
    })
    .catch(e => {
      console.error(e);
    });
};

const showModifyPassword = () => {
  Dialog.show('修改密码', FormModifyPassword, { area: '500px' }, {}).catch(e => {
    console.warn(e);
  });
};
</script>

<style lang="scss">
.login-form {
  position: relative;
  display: flex;
  // justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background: url('@/assets/img/loginbg.jpg') no-repeat center center;
  background-size: cover;

  .logo-box {
    position: absolute;
    top: 6.66vh;
    right: 5.5vw;
    left: 5.5vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28px;
    color: #e2e8f0;
    font-weight: bold;

    img {
      margin-right: 11px;
    }
  }

  .login-box {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    height: 499px;
    border-radius: 3px;
    left: 5.5vw;



    .login-input {
      display: flex;
      width: 448px;
      padding: 46px 40px;
      background: rgba(15, 23, 42, 0.85);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(59, 130, 246, 0.3);
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 60px rgba(59, 130, 246, 0.1);
      flex-direction: column;

      .title {
        margin-bottom: 5px;
        font-size: 32px;
        color: #f1f5f9;
        font-weight: bold;
      }

      .desc {
        margin-bottom: 24px;
        font-size: 18px;
        color: #cbd5e1;
      }

      .third-login {
        text-align: center;

        .title {
          color: #64748b;
          font-size: 12px;
          font-weight: normal;
          margin-top: 25px;
          margin-bottom: 25px;
        }

        .login-icon-container {
          display: flex;
          align-items: center;
          gap: 12px;

          .login-icon-item {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(30, 41, 59, 0.5);
            border: 1px solid rgba(71, 85, 105, 0.3);
            border-radius: 8px;
            padding: 12px;
            transition: all 0.3s ease;

            &:hover {
              background: rgba(30, 41, 59, 0.8);
              border-color: rgba(34, 211, 238, 0.5);
              transform: translateY(-2px);
            }

            a {
              cursor: pointer;
              color: #94a3b8 !important;
              transition: color 0.3s ease;

              &:hover {
                color: #22d3ee !important;
              }
            }
          }
        }
      }

      .login-back-local {
        i {
          cursor: pointer;
          color: #cbd5e1;
        }

        .title {
          margin-left: 10px;
          color: #f1f5f9;
        }
      }
    }

    .img-box {
      position: relative;
      height: 100%;
      margin-left: 109px;
      display: flex;
      align-items: center;
      justify-content: center;

      .img-title {
        position: absolute;
        top: -80px;
        right: 0;
        left: 0;
        display: none;
        width: 375px;
        margin: 0 auto;
      }
    }
  }

  .el-form-item__label {
    color: #cbd5e1 !important;
  }

  .el-link {
    &.el-link--info {
      color: #94a3b8 !important;

      &:hover {
        color: #22d3ee !important;
      }
    }

    &.el-link--primary {
      color: #3b82f6 !important;

      &:hover {
        color: #60a5fa !important;
      }
    }
  }

  .el-text {
    color: #cbd5e1 !important;
  }
}

.login-form .el-input__wrapper {
  background-color: rgba(20, 30, 48, 0.95) !important;
  box-shadow: 0 0 0 0px rgba(20, 30, 48, 0.95) inset;
  border: none;
}

.login-form .el-input__inner {
  height: 40px !important;
  background: rgba(20, 30, 48, 0.95) !important;
  // border: 1px solid rgba(71, 85, 105, 0.6) !important;
  color: #f1f5f9 !important;
  transition: all 0.3s ease !important;

  &::placeholder {
    color: #fff !important;
  }

  &:focus {
    // background: rgba(15, 23, 42, 1) !important;
    // border-color: rgba(34, 211, 238, 0.8) !important;
    // box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2) !important;
  }
}

.login-form .login-btn-submit {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  // transition: all 0.3s ease !important;
  // box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;

  &:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    // transform: translateY(-2px);
    // box-shadow: 0 8px 20px rgba(59, 130, 246, 0.5) !important;
  }

  &:active {
    // transform: translateY(0);
  }
}

.login-form>div:last-child {
  background-color: rgba(15, 23, 42, 0.9) !important;
  backdrop-filter: blur(10px);
  color: #94a3b8 !important;
  border-top: 1px solid rgba(71, 85, 105, 0.3);

  p {
    color: #94a3b8 !important;
  }
}

.logo-right {

  a,
  span {
    font-size: 16px;
    font-weight: normal;
    color: #cbd5e1;
  }
}
</style>
